<template>
  <div class="home">
    <!-- 主页横幅 -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <h1>檀溪AI技术博客</h1>
          <p class="subtitle">探索AI的无限可能，分享技术的前沿思考</p>
          <div class="hero-buttons">
            <router-link to="/blog" class="btn btn-primary">浏览博客</router-link>
            <router-link to="/chat" class="btn btn-secondary">体验AI助手</router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- 特色内容 -->
    <section class="features">
      <div class="container">
        <h2 class="section-title">我们的特色</h2>
        <div class="feature-grid">
          <div class="feature-card">
            <div class="feature-icon">📝</div>
            <h3>技术博客</h3>
            <p>分享最新的AI技术研究、开发经验和行业动态</p>
            <router-link to="/blog" class="feature-link">查看博客</router-link>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">🤖</div>
            <h3>AI助手</h3>
            <p>体验智能对话，解答问题，提供技术支持</p>
            <router-link to="/chat" class="feature-link">立即体验</router-link>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">👥</div>
            <h3>技术社区</h3>
            <p>加入我们的技术社区，与志同道合的开发者交流</p>
            <router-link to="/about" class="feature-link">了解更多</router-link>
          </div>

          <div class="feature-card">
            <div class="feature-icon">🍔</div>
            <h3>食物转盘</h3>
            <p>给小李选择困难症准备</p>
            <router-link to="/food" class="feature-link">点击跳转</router-link>
          </div>
          
        </div>
      </div>
    </section>

    <!-- 外部链接 -->
    <section class="external-links">
      <div class="container">
        <h2 class="section-title">推荐链接</h2>
        <div class="link-grid">
          <a href="https://www.bing.com" target="_blank" class="link-card">
            <div class="link-icon">🔍</div>
            <h3>Bing搜索</h3>
            <p>微软新一代AI驱动的智能搜索引擎</p>
          </a>
          
          <a href="https://openai.com" target="_blank" class="link-card">
            <div class="link-icon">🤖</div>
            <h3>OpenAI</h3>
            <p>领先的AI研究机构，ChatGPT的开发者</p>
          </a>
          
          <a href="https://huggingface.co" target="_blank" class="link-card">
            <div class="link-icon">🤗</div>
            <h3>Hugging Face</h3>
            <p>最大的开源AI模型和数据集社区</p>
          </a>
          <a href="https://www.kaggle.com" target="_blank" class="link-card">
            <div class="link-icon">📊</div>
            <h3>Kaggle</h3>
            <p>数据科学和机器学习竞赛平台</p>
          </a>
          <a href="https://docs.langchain.com.cn/docs/introduction/" target="_blank" class="link-card">
            <div class="link-icon">🚀</div>
            <h3>Langchain</h3>
            <p>最实用大模型应用开发框架</p>
          </a>
          <a href="https://www.grok.com" target="_blank" class="link-card">
            <div class="link-icon">🌎</div>
            <h3>Grok3</h3>
            <p>马斯克地表最强大模型</p>
          </a>
          <a href="https://stackoverflow.com/" target="_blank" class="link-card">
            <div class="link-icon">🌊</div>
            <h3>stackoverflow</h3>
            <p>全球程序员技术讨论社区</p>
          </a>
          <a href="https://www.aliyun.com/product/bailian" target="_blank" class="link-card">
            <div class="link-icon">🚄</div>
            <h3>阿里云百炼</h3>
            <p>阿里大模型百炼平台，大模型、云服务器等支持</p>
          </a>
          <a href="https://ngrok.com/downloads/linux" target="_blank" class="link-card">
            <div class="link-icon">🚓</div>
            <h3>ngrok下载 可以将本地端口 放至公网运行 ，回去研究一下</h3>
            <p>私网转公网</p>
          </a>
          <a href="https://www.deepseek.com/" target="_blank" class="link-card">
            <div class="link-icon">🚄</div>
            <h3>deepseek-探索未至之境</h3>
            <p>deepseek</p>
          </a>
          <a href="https://www.wenxiaobai.com/chat/200006" target="_blank" class="link-card">
            <div class="link-icon">🚆</div>
            <h3>问小白 deepseek-探索未至之境 平替版本</h3>
            <p>平替 deepseek</p>
          </a>
        </div>
      </div>
    </section>
    
    <!-- 最新文章 -->
    <section class="latest-posts">
      <div class="container">
        <h2 class="section-title">最新文章</h2>
        <div class="post-grid">
          <article v-for="(post, index) in latestPosts" :key="post.id" class="post-card" v-if="index < 3">
            <div class="post-image" :style="{ backgroundImage: `url(${post.coverImage || '@/assets/img/post-bg.jpg'})` }"></div>
            <div class="post-content">
              <h3 class="post-title">{{ post.title }}</h3>
              <p class="post-meta">{{ post.date }} · {{ post.author }}</p>
              <p class="post-excerpt">{{ post.subtitle }}</p>
              <router-link :to="`/post/${post.id}`" class="read-more">阅读全文</router-link>
            </div>
          </article>
        </div>
        <div class="view-all">
          <router-link to="/blog" class="btn btn-outline">查看所有文章</router-link>
        </div>
      </div>
    </section>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { articleApi } from '@/api/api'

const latestPosts = ref([])

onMounted(async () => {
  try {
    const response = await articleApi.getArticleList()
    if (response) {
      latestPosts.value = response
    }
  } catch (error) {
    console.error('获取文章列表失败：', error)
  }
})
</script>

<style scoped>
/* 主页横幅 */
.hero {
  background: linear-gradient(120deg, rgba(44, 62, 80, 0.9), rgba(52, 152, 219, 0.9)), url('@/assets/img/home-bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
  color: white;
  padding: 6rem 0;
  text-align: center;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 3rem;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.btn {
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #3498db;
  color: white;
  box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
}

.btn-primary:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid white;
}

.btn-secondary:hover {
  background-color: white;
  color: #3498db;
  transform: translateY(-2px);
}

/* 项目展示 */
.projects {
  padding: 3rem 0;
  margin-bottom: 3rem;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.project-card {
  background-color: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.project-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.project-description {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tech-tag {
  background-color: #f0f4f8;
  color: #3498db;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.project-links {
  display: flex;
  gap: 1rem;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.project-link.github {
  background-color: #24292e;
  color: white;
}

.project-link.github:hover {
  background-color: #1a1e22;
  transform: translateY(-2px);
}

.project-link.gitee {
  background-color: #c71d23;
  color: white;
}

.project-link.gitee:hover {
  background-color: #a01419;
  transform: translateY(-2px);
}

/* 特色内容 */
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2.5rem;
  color: #2c3e50;
  position: relative;
}

.section-title:after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: #3498db;
  margin: 0.5rem auto 0;
  border-radius: 3px;
}

.features {
  padding: 3rem 0;
  margin-bottom: 3rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-card {
  background-color: white;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.feature-card p {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.feature-link {
  color: #3498db;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.feature-link:after {
  content: '→';
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.feature-link:hover:after {
  transform: translateX(5px);
}

/* 最新文章 */
.latest-posts {
  padding: 3rem 0;
  background-color: #f8f9fa;
  border-radius: 30px;
  margin-bottom: 3rem;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.post-card {
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.post-image {
  height: 200px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.post-content {
  padding: 1.5rem;
}

.post-title {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

.post-meta {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.post-excerpt {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.read-more {
  color: #3498db;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.read-more:after {
  content: '→';
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.read-more:hover:after {
  transform: translateX(5px);
}

.view-all {
  text-align: center;
  margin-top: 3rem;
}

.btn-outline {
  background-color: transparent;
  color: #3498db;
  border: 2px solid #3498db;
}

.btn-outline:hover {
  background-color: #3498db;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .subtitle {
    font-size: 1.2rem;
  }
  
  .feature-grid,
  .post-grid {
    grid-template-columns: 1fr;
  }
}

/* 外部链接 */
.external-links {
  padding: 4rem 0;
  background-color: #f8f9fa;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.link-card {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  text-decoration: none;
  color: #2c3e50;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.link-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.link-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.link-card h3 {
  margin: 0.5rem 0;
  font-size: 1.25rem;
  color: #2c3e50;
}

.link-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}
</style>